<!--
 * @Description  : 
 * @Version      : 1.0
 * @Author       : Shiming
 * @Date         : 2022-02-11 14:23:46
 * @LastEditors  : Shiming
 * @LastEditTime : 2022-02-11 14:31:45
 * @FilePath     : \\tms-obc-web\\src\\app\\shared\\components\\singlepage-setting\\singlepage-setting-h5\\singlepage-setting-h5.component.html
 * Copyright (C) 2022 huzhenhong. All rights reserved.
-->
<nz-card [nzLoading]="service.http.loading">
    <div nz-row [nzGutter]="8">
        <div nz-col [nzSpan]="tabSpan">
            <ul nz-menu nzMode="inline" class="card-height">
                <li nz-menu-item [nzSelected]="idx === 0" (click)="changeType(item)"
                    *ngFor="let item of tabs; let idx = index">
                    {{ item.name }}
                </li>
            </ul>
        </div>

        <div nz-col [nzSpan]="24-tabSpan" style="overflow: scroll">
            <nz-card class="card-height" [nzBordered]="null" nzSize="small">
                <h2 style="font-weight: 800;">{{selectedTab?.name}}</h2>
                <div nz-row nzGutter="8">
                    <div nz-col nzSpan="24" se-container [labelWidth]="labelWidth">
                        <se [label]="item.name" *ngFor="let item of configList" col="1">
                            <ng-container [ngSwitch]="item.itemType">
                                <ng-container *ngSwitchCase="1">
                                    <nz-input-group [nzAddOnAfter]="item.remark?.afterLable" style="width: 155px;"
                                        class="ml-md mr-xl">
                                        <input type="number" nz-input [(ngModel)]="item.itemValue" placeholder="请输入" />
                                    </nz-input-group>
                                </ng-container>
                                <ng-container *ngSwitchCase="2">
                                    <nz-radio-group [(ngModel)]="item.itemValue" class="mr-xl">
                                        <label nz-radio [nzValue]="0" class="ml-xl">{{item.remark?.[0] || '否'}}</label>
                                        <label nz-radio [nzValue]="1" class="ml-xl">{{item.remark?.[1] || '是'}}</label>
                                    </nz-radio-group>
                                </ng-container>
                                <ng-container *ngSwitchCase="3">
                                    <nz-time-picker nzFormat="HH:mm" nzPlaceHolder="请选择时间" [(ngModel)]="item.itemValue"
                                        class="ml-md mr-xl">
                                    </nz-time-picker>
                                </ng-container>
                                <ng-container *ngSwitchCase="5">
                                    <div class="d-flex" style="align-items: center;justify-content: space-between;">
                                        <input type="time" [(ngModel)]="item.itemValue.startTime" placeHolder="开始时间"
                                            style="margin-left: 23px;">
                                        <label class="ml-sm mr-sm"> --</label>
                                        <input type="time" [(ngModel)]="item.itemValue.endTime" placeHolder="结束时间"
                                            style="margin-left: 0;" class=" mr-xl">
                                    </div>
                                </ng-container>
                                <ng-container *ngSwitchCase="6">
                                    <div class="d-flex" style="align-items: center;justify-content: space-between;">

                                        <nz-radio-group [(ngModel)]="item.itemValue.radio" class="mr-xl">
                                            <label nz-radio [nzValue]="0" class="ml-xl">{{item.remark?.[0] ||
                                                '否'}}</label>
                                            <label nz-radio [nzValue]="1" class="ml-xl">{{item.remark?.[1] ||
                                                '是'}}</label>
                                        </nz-radio-group>

                                        <input type="time" [(ngModel)]="item.itemValue.startTime" placeHolder="开始时间"
                                            style="margin-left: 23px;">
                                        <label class="ml-sm mr-sm"> --</label>
                                        <input type="time" [(ngModel)]="item.itemValue.endTime" placeHolder="结束时间"
                                            style="margin-left: 0;" class=" mr-xl">
                                    </div>
                                </ng-container>
                            </ng-container>

                        </se>
                    </div>
                </div>
            </nz-card>


            <div class="mb-md save-btn">
                <button class="ml-lg" nz-button nzSize="large" nzType="primary" (click)="saveAction()"
                    *ngIf="selectedTab?.configKey!=='freight'">保存</button>
            </div>
        </div>
    </div>
</nz-card>